<template>
  <div class="main">
    <el-row>
      <div class="buttonBox">
        <el-button type="primary" size="small" @click="handleAdd">新建排期</el-button>
      </div>
    </el-row>
    <el-form
      :inline="true"
      label-width="120px"
      style="margin-top:20px;"
      labelPosition="left"
      :model="get_resources"
    >
      <el-row type="flex" justify="space-around">
        <el-col :span="11">
          <el-form-item label="排期日期">
            <el-date-picker
              style="width:300px"
              type="daterange"
              v-model="get_resources.player_date"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="媒介">
            <el-select
              clearable
              v-model="get_resources.medium_public.get_medium"
              style="width:300px;"
              value-key="id"
              @change="mediumChange"
              placeholder="请选择"
            >
              <el-option v-for="item in mediumList" :key="item.id" :label="item.name" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="space-around">
        <el-col :span="11">
          <el-form-item label="频道">
            <el-select
              clearable
              v-model="get_resources.medium_public.get_media"
              value-key="id"
              @change="meidaChange"
              style="width:300px;"
              placeholder="请选择"
            >
              <el-option v-for="item in mediaList" :key="item.id" :label="item.name" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="节目">
            <el-select
              clearable
              v-model="get_resources.medium_public.get_program"
              style="width:300px;"
              value-key="id"
              @change="programChange"
              placeholder="请选择"
            >
              <el-option
                v-for="item in programList"
                :key="item.id"
                :label="item.name"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11" :offset="1">
          <el-button type="primary" @click="getList">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row style="margin-top:20px;padding:0 10px;">
      <el-collapse v-model="activeNames">
        <el-collapse-item :name="index" v-for="(item,index) in scheduleList" :key="item.id">
          <template slot="title">
            <div class="titleBox">
              <span>{{item.cycel}}</span>
              <div>
                <el-button type="primary" icon="el-icon-edit" style="margin-right:5px;">编辑</el-button>
                <el-button type="warning" icon="el-icon-upload2">输出</el-button>
              </div>
            </div>
          </template>
          <el-table
            :cell-style="$rowstyle"
            :header-cell-style="$headerstyle"
            :data="item.get_resources"
            border
            style="width: 100% margin-top:20px;"
          >
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column prop="resources_name" label="城市" align="center" width="150"></el-table-column>
            <el-table-column prop="media_up_name" label="广告主" align="center"></el-table-column>
            <el-table-column prop="player_date" label="播放日期" align="center" width="120"></el-table-column>
            <el-table-column label="操作" align="center" width="100">
              <template slot-scope="scope">
                <el-button @click="handleShowMaterial(scope.row)" type="text" size="small">素材名称</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </el-row>
    <img-See :id="media_up_id" v-if="showMatarial" @closeSee="closeSee"></img-See>
    <el-dialog
      title="新建排期"
      :visible.sync="addShow"
      destroy-on-close
      append-to-body
      center
      width="60%"
    >
      <addSchdule @postSucess="postSucess"></addSchdule>
    </el-dialog>
  </div>
</template>

<script>
import {
  getmediaINFO,
  getChannel,
  getShow,
  GETresource_list,
  getResourceTypeList,
  Scheduing_list,
  Schedue_list
} from "../../api/Salesman.js";
import moment from "moment";
import imgSee from "./scheduleComponents/imgSee.vue";
import addSchdule from "./scheduleComponents/addSchdule.vue";
export default {
  components: {
    imgSee,
    addSchdule
  },
  data() {
    return {
      get_resources: {
        resources_name: "",

        player_date: "",
        medium_public: {
          //   meijie
          get_medium: {
            id: ""
          },
          //   ziyuanleixin
          get_resource: {
            id: ""
          },
          //   jiemu
          get_program: {
            id: ""
          },
          //   pingdao
          get_media: {
            id: ""
          }
        }
      },
      mediumList: [],
      mediaList: [],
      programList: [],
      media_up_id: "",
      resourceList: [],
      activeNames: "",
      scheduleList: [],
      showMatarial: false,
      addShow: false
    };
  },
  methods: {
    //   获取媒介
    getMediumList() {
      getmediaINFO({}).then(res => {
        if (res.code == 200) {
          this.mediumList = res.data.mediums;
        } else {
          this.$message.error("获取媒介失败,请关闭重试");
        }
      });
    },
    mediumChange(e) {
      console.log(e);
      this.get_resources.medium_public.get_medium = e;
    },
    // 获取频道
    getChannelList(id) {
      let data = {
        medium_id: [id]
      };
      getChannel(data).then(res => {
        if (res.code == 200) {
          this.mediaList = res.data;
        } else {
          this.$message.error("获取频道失败,请关闭重试");
        }
      });
    },
    meidaChange(e) {
      this.get_resources.medium_public.get_media = e;
    },
    // 获取节目
    getProgramList(id) {
      let data = {
        media_id: [id]
      };
      getShow(data).then(res => {
        if (res.code == 200) {
          this.programList = res.data;
        } else {
          this.$message.error("获取节目失败,请关闭重试");
        }
      });
    },
    programChange(e) {
      this.get_resources.medium_public.get_program = e;
    },
    getResourceList() {
      let data = {
        media_id: this.get_resources.medium_public.get_media.id || "",
        table_name:
          this.get_resources.medium_public.get_medium.table_name || "",
        resources_id: this.get_resources.medium_public.get_resource.id || "",
        program_id: this.get_resources.medium_public.get_program.id || "",
        search_word: "",
        per: 9999999
      };
      GETresource_list(data).then(res => {
        if (res.code == 200) {
          this.resourceList = res.data.data;
        } else {
          this.$message.error("获取资源失败,请关闭重试");
        }
      });
    },
    getList() {
      let obj = {
        medium_id: this.get_resources.medium_public.get_medium.id,
        channel_id: this.get_resources.medium_public.get_media.id,
        program_id: this.get_resources.medium_public.get_program.id,
        start_time:
          this.get_resources.player_date == ""
            ? ""
            : moment(this.get_resources.player_date[0]).unix(),
        end_time:
          this.get_resources.player_date == ""
            ? ""
            : moment(this.get_resources.player_date[1]).unix()
      };
      Schedue_list(obj).then(res => {
        if (res.code == 200) {
          this.scheduleList = res.data;
        } else {
          this.$message.error("查询失败");
        }
      });
    },
    handleShowMaterial(data) {
      this.media_up_id = data.id;
      this.showMatarial = true;
    },
    closeSee() {
      this.showMatarial = false;
    },
    handleAdd() {
      this.addShow = true;
    },
    postSucess() {
      this.addShow =false
      this.getMediumList();
      this.getList();
    }
  },
  computed: {
    //   获取媒介id
    getMediumId() {
      return this.get_resources.medium_public.get_medium.id;
    },
    //   获取频道id
    getMediaId() {
      return this.get_resources.medium_public.get_media.id;
    },
    //   获取节目id
    getProgramId() {
      return this.get_resources.medium_public.get_program.id;
    }
  },
  watch: {
    getMediumId(newVal, oldVal) {
      if (newVal && newVal == "") {
        this.get_resources.medium_public.get_media.id = "";
      }
      this.getChannelList(newVal);
    },
    getMediaId(newVal, oldVal) {
      if (newVal && newVal == "") {
        this.get_resources.medium_public.get_program.id = "";
      }
      this.getProgramList(newVal);
      this.getResourceList();
    },
    getResourceId(newVal, oldVal) {
      this.getResourceList();
    }
  },
  mounted() {
    this.getMediumList();
    this.getList();
  }
};
</script>

<style lang='scss' scoped>
.main {
  width: 100%;
  height: 100%;
}
.titleBox {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.titleBox > span {
  flex: 1;
}
.buttonBox {
  display: flex;
  flex-flow: row-reverse;
  padding: 0 10px;
}
</style>